<!-- 物流信息 -->
<template>
  <div class="detail-info">
          <div  style="margin-left: 29px;padding: 18px 0px 0px 0px;">
              <div>
                <div style="font-size: 14px;font-weight: bold;color: rgba(52, 69, 99, 1);margin-left: 2px;">收货人信息:</div>
                <div style="margin-left: 12px;color: rgba(52, 69, 99, 1);">
                  <div
                    class="margintop"
                    style="margin-top: 12px; display: flex;font-size: 12px; color: rgba(52, 69, 99, 1);"
                  >收货人：
                    <div style="margin-left: 47px;letter-spacing: 3px; color: rgba(52, 69, 99, 1);">{{ detail.receiverName }}</div>
                  </div>
                  <div
                    class="margintop"
                    style="margin-top: 7px; display: flex;font-size: 12px;color: rgba(52, 69, 99, 1);"
                  >联系电话：
                    <div style="margin-left: 35px;letter-spacing: 1px; color: rgba(52, 69, 99, 1);">{{ detail.receiverPhone }}</div>
                  </div>
                  <div
                    class="margintop"
                    style="margin-top: 7px; display: flex;font-size: 12px;color: rgba(52, 69, 99, 1);"
                  >收获地址：
                    <div style="margin-left: 35px;letter-spacing: 1px; color:rgba(52, 69, 99, 1) ;">{{ detail.receiverDetailAddress }}</div>
                  </div>
                </div>
              </div>
              <div style="color: rgba(52, 69, 99, 1);margin-top: 31px;margin-left: 5px;">
                <div style="font-size: 14px;font-weight: bold;color: rgba(52, 69, 99, 1);">付款信息:</div>
                <div style="margin-left: 6px;">
                  <div
                    class="margintop"
                    style="margin-top: 12px; display: flex;font-size: 12px;color: rgba(52, 69, 99, 1);"
                  >实付金额：
                    <div style="margin-left: 35px;letter-spacing: 1px;">
                      <el-statistic
                        group-separator=","
                        value-style="color:rgba(52, 69, 99, 1);font-size: 12px;margin-top:2px;"
                        :value="detail.orderAmount"
                        prefix="¥"
                      >
                      </el-statistic>
                    </div>
                  </div>
                  <div
                    class="margintop"
                    style="margin-top: 7px; display: flex;font-size: 12px;color: rgba(52, 69, 99, 1);"
                  >付款方式：
                    <div style="margin-left: 35px;letter-spacing: 1px;">{{ getPayType(detail.payType) }}</div>
                  </div>
                </div>
              </div>
              <div style="margin-left: 4px; margin-top: 31px;">
                <div style="font-size: 14px;font-weight: bold;color: rgba(52, 69, 99, 1);margin-top: 20px;">物流信息:</div>

                <div style="margin-left: 6px;">
                  <div
                    class="margintop"
                    style="margin-top: 12px; display: flex;font-size: 12px;color: rgba(52, 69, 99, 1);"
                  >物流公司：
                    <div style="margin-left: 35px;letter-spacing: 1px;">顺丰快递</div>
                  </div>
                  <div
                    class="margintop"
                    style="margin-top: 7px; display: flex;font-size: 12px;color: rgba(52, 69, 99, 1);"
                  >快递编号：
                    <div style="margin-left: 35px;letter-spacing: 1px;">1234567890</div>
                  </div>
                  <div style="display: flex;margin-top: 7px;" class="margintop">
                    <div style="margin-top: 7px;margin-top: 0px;  font-size: 12px;color:rgba(52, 69, 99, 1);">物流详情：
                    </div>
                    <div style="margin-left: 2rem; margin-top: 7px;">
                      <OrderTimeLine></OrderTimeLine>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          
  </div>
</template>

<script> 
import OrderTimeLine from "@/views/order/components/OrderTimeLine.vue";
export default {
name: "MessageDeatil",
components: {
  OrderTimeLine
},
props: {
  message: {
    type: Object,
    default: () => {}
  }
},
watch: {
  message: {
    handler(newVal) {
      this.message = newVal;
    },
    deep: true
  }
},
data() {
  return {
    value: 10000,
    detail:this.message
  };
},
methods: {
  handleClick() {
    console.log("handleClick");
  },
   //获取配送方式
   getTradeType(tradeType) {
      if (tradeType === 1) {
        return "快递";        
      } else if (tradeType === 2) {
        return "自提";
      } else {
        return " ";
      }
    },
    //获取支付方式
    getPayType(payType) {
      if (payType === 0) {
        return "待支付";
      } else if (payType === 1) {
        return "支付宝";
      } else if (payType === 2) {
        return "微信";
      } else if (payType === 3) {
        return "线下支付";
      }else {
        return "其他";
      }
    },
},

}
</script>

<style>
.detail-info{
  left: 474px;
top: 1805px;
width: 1002px;
height: 505px;
opacity: 1;
background: rgba(247, 249, 252, 1);
/* padding: 18px 29px; */
margin-top: 30px;
}

.margintop {
  font-size: 0.9rem;
  font-weight: 500;
  /* margin-top: 0.99rem; */
  margin-left: 2%;
}
</style>